<template>
	<div id="app">
		<h1>在线翻译</h1>
		<h5 class="text-muted">高效 / 易用 / 简单</h5>
		<translateForm v-on:formaa="translateText"></translateForm>
		<!--表单组件-->
		<translateOutput v-text="translatedText"></translateOutput>
		<!--显示翻译内容组件-->
	</div>
</template>

<script>
	//  调用两个组件
	import TranslateForm from './components/TranslateForm';
	import TranslateOutput from './components/TranslateOutput';

	export default {
		name: 'App',
		data: function() {
			return {
				translatedText: ''
			}
		},
		components: {
			TranslateForm,
			TranslateOutput
		},
		methods: {
			translateText: function(text, language) {
				
			 this.$axios.get('https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20180206T031404Z.0632deea916adc73.9014116b25ff067374b3f951a525e6853f99674a',{
			 	params:{
			 		lang:language,
			 		text:text
			 	}
			 }).then(res => {
			 	console.log(res)
			 	this.translatedText = res.data.text[0]
			 }).catch(function(error){
			 	console.log(error)
			 })
			}
		}
	}
</script>

<style>
	#app {
		font-family: 'Avenir', Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
		margin-top: 60px;
	}
</style>